<template>
  <div class="manage-versions">
      <div class="container">
         <div class="model-title text-overflow">版本管理</div>
         <div class="version-list">
           <!-- 根据品牌查询版本号和地址 -->
           <div class="query-info">
              <div class="query-info-label">选择对应品牌</div>
              <div>
                <el-select v-model="brand_id" @change="handleChangeBrand" placeholder="请选择">
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
           </div>
           <div class="info-box" v-loading="loading">
              <!-- APP压缩文件上传 -->
              <div class="app-upload">
                <h2 class="v-title" style="text-align:center;">App压缩文件上传</h2>
                <div>
                  <form :action="uploadUrl" method="post" enctype="multipart/form-data">
                      <div class="form-item">
                        <span class="form-item-label">文件</span>
                        <input placeholder="请选择需要上传的APP文件" class="form-input" type="file"  name="android"/>
                      </div>
                      <div class="form-item">
                        <span class="form-item-label ">贴牌id</span>
                        <input placeholder="请输入贴牌ID" class="form-control form-input"  name="brand_id" id="brand_id"/>
                      </div>
                      <div class="form-submit-item">
                        <input class="btn btn-default" type="submit"  id="submit" value="提交"/>
                      </div>       
                  </form>
                </div>
              </div>
              <!-- 版本号和地址修改 -->
              <div class="version-update">
                <el-form ref="versionForm" :model="versionForm" label-width="150px">
                
                <h2 style="text-align:center;">版本号和地址修改</h2>
                  <el-form-item label="品牌编号">
                      <el-input  disabled v-model="versionForm.id"></el-input>
                  </el-form-item>
                  <el-form-item label="极光APP密匙">
                      <el-input placeholder="请输入极光APP密匙" v-model="versionForm.appkey"></el-input>
                  </el-form-item>
                  <el-form-item label="极光APP推送密匙">
                      <el-input placeholder="请输入极光APP推送密匙" v-model="versionForm.mastersecret"></el-input>
                  </el-form-item>
                  <el-form-item label="短信发送码">
                      <el-input placeholder="请输入短信发送码"  v-model="versionForm.tplid"></el-input>
                  </el-form-item>
                <h3 style="text-align:center;">安卓</h3>
                  <el-form-item label="Android版本号">
                      <el-input placeholder="请输入Android版本号" v-model="versionForm.androidVersion"></el-input>
                  </el-form-item>
                  <el-form-item label="Android版本描述">
                      <el-input placeholder="请输入Android版本描述" v-model="versionForm.androidContent"></el-input>
                  </el-form-item>
                  <el-form-item label="Android下载地址">
                      <el-input placeholder="请输入Android下载地址" v-model="versionForm.androidDownload"></el-input>
                  </el-form-item>
                <h3 style="text-align:center;">苹果</h3>
                  <el-form-item label="IOS版本号">
                      <el-input placeholder="请输入IOS版本号" v-model="versionForm.iosVersion"></el-input>
                  </el-form-item>
                  <el-form-item label="IOS版本描述">
                      <el-input placeholder="请输入IOS版本描述" v-model="versionForm.iosContent"></el-input>
                  </el-form-item>
                  <el-form-item label="IOS下载地址">
                      <el-input placeholder="请输入IOS下载地址" v-model="versionForm.iosDownload"></el-input>
                  </el-form-item>
                <h3 style="text-align:center;">分享链接</h3>
                  <el-form-item label="分享标题">
                      <el-input placeholder="请输入分享标题" v-model="versionForm.shareTitle"></el-input>
                  </el-form-item>
                  <el-form-item label="分享内容">
                      <el-input placeholder="请输入分享内容" v-model="versionForm.shareContent"></el-input>
                  </el-form-item>
                  <el-form-item label="H5注册链接">
                      <el-input placeholder="请输入H5注册链接" v-model="versionForm.shareMainAddress"></el-input>
                  </el-form-item>
                <h3 style="text-align:center;">客服</h3>
                  <el-form-item label="客服400电话">
                      <el-input placeholder="请输入客服400电话"  v-model="versionForm.brandPhone"></el-input>
                  </el-form-item>
                  <el-form-item label="QQ客服">
                      <el-input placeholder="请输入QQ客服" v-model="versionForm.brandQQ"></el-input>
                  </el-form-item>
                  <el-form-item  label="微信客服">
                      <el-input placeholder="请输入微信客服" v-model="versionForm.brandWeiXin"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <div style="text-align:center;padding-right:150px;box-sizing:border-box;" >
                      <el-button type="danger" @click="submitUpdata" style="width:200px">提交</el-button>
                    </div>                 
                  </el-form-item>
                </el-form>
              </div>
           </div> 
         </div>
      </div>
  </div>
</template>

<script>
export default {
  name:'manage-versions',
  data () {
    return {
       uploadUrl: this.$Http.defaults.baseURL + "user/brand/androidapp/upload",
        loading:false,
        brand_id:null,
        brandList:[],
        versionForm: {
          id:null,
          appkey:null,
          mastersecret:null,
          tplid :null,
          androidVersion:null,
          androidDownload:null,
          iosVersion:null,
          iosDownload:null,
          brandPhone:null,
          brandQQ:null,
          brandWeiXin:null,
          androidContent:null,
          iosContent:null,
          shareMainAddress:null,
          shareTitle:null,
          shareContent:null
        }
    };
  },
  components: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init(){
       let url = `user/brand/query/all`;
       this.$Http.get(url).then(res=>{
         if(res.data.resp_code === "000000"){
           this.brandList = res.data.result;
         }else{
           this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
         }
       }).catch(err=>{
         this.$notify.error({
            title: '提示',
            message: "获取品牌信息失败！"
        });
       })
    },
    handleChangeBrand(value){
      this.loading = true;
      let url = `user/brand/query/id?brand_id=${this.brand_id}`;
      this.$Http.get(url).then(res=>{
        this.loading = false;
        if(res.data.resp_code === "000000"){
          this.versionForm = res.data.result;
        }else{
          this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.loading = false;
         this.$notify.error({
            title: '提示',
            message: "获取品牌信息失败！"
        });
      })
    },
    submitUpdata(){
      // 提交信息
      let url = `user/brand/version/update`,
          params = `brand_id=${this.brand_id}&appkey=${this.versionForm.appkey}&mastersecret=${this.versionForm.mastersecret}&tplid=${this.versionForm.tplid}&androidVersion=${this.versionForm.androidVersion}&download_android=${this.versionForm.androidDownload}&iosVersion=${this.versionForm.iosVersion}&download_ios=${this.versionForm.iosDownload}&brand_phone=${this.versionForm.brandPhone}&brand_qq=${this.versionForm.brandQQ}&brand_weixin=${this.versionForm.brandWeiXin}&android_content=${this.versionForm.androidContent}&ios_content=${this.versionForm.iosContent}&share_main_address=${this.versionForm.shareMainAddress}&share_title=${this.versionForm.shareTitle}&share_content=${this.versionForm.shareContent}`;
      this.$Http.post(url,params).then(res=>{
        if(res.data.resp_code === "000000"){
           // 修改成功
        }
        this.$notify.info({
          title:"提示",
          message:res.data.resp_message
        })
      }).catch(err=>{
        this.$notify.info({
          title:"出错",
          message:"请求修改出错"
        })
      })
    }
  }
}

</script>
<style scoped>
.manage-versions{
  padding: 20px;
  box-sizing: border-box;
  min-width: 450px;
}
.query-info{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px;
}
.query-info-label{
  width: 150px;
  text-align: right;
  padding-right: 15px;
  box-sizing: border-box;
  font-size: 16px;
  color: #f56c6c;
  font-weight: 600;
}
.app-upload{
   padding:0 20px 40px;

}
.info-box{
  padding: 20px;
  border-top: 1px solid #ededed;
}
.form-item{
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.form-item-label{
  display: block;
  width: 120px;
  padding-right: 15px;
  box-sizing: border-box;
  text-align: right;
}
.form-submit-item{
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.version-update{
  border-top: 1px solid #ededed;
}
.btn{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    font-size: 12px;
    border-radius: 3px;
    width: 200px;
    padding: 9px 15px;
}
.form-input{
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 32px;
    line-height: 32px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
</style>